<%@page import="com.dotmedia.entities.UITranslations"%>
<%@page import="com.dotmedia.dboperations.UITranslationsDatabaseOperations"%>
<%@page import="com.dotmedia.entities.Role"%>
<%@page import="com.dotmedia.dboperations.RoleDatabaseOperations"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<%@page import="java.io.*"%>
<%@page import="org.apache.log4j.Logger"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/astele.css">
<link type="text/css" href="css/jquery-ui-1.8.10.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="javascript/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
	src="javascript/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
	function showAddNewUserDialog() {
		jQuery("#newuserForm").dialog(
				{
					height: 300,
					width: 700,
					modal: true
				}
		);
	}
	function showCalendar() {
		jQuery("#expireOnDate").datepicker();
	}
	function showModifyCalendar() {
		jQuery("#expireOnDateModify").datepicker();
	}
	function modifyUserDialogOpen(userEmail, userName, surname, userExtId, langCode, password, role, expiryDate, userId) {
		jQuery("#userExtIdModify").val(userExtId);
		jQuery("#userEmailModify").val(userEmail);
		jQuery("#userPasswordModify").val(password);
		jQuery("#userNameModify").val(userName);
		jQuery("#surnameModify").val(surname);
		jQuery("#expireOnDateModify").val(expiryDate);
		jQuery("#userIdModify").html(userId);
		jQuery("#langCodeModify").val(langCode);
		jQuery("#userRoleModify").val(role);
		jQuery("#editUserForm").dialog(
				{
					height: 300,
					width: 700,
					modal:true
				}
		);
	}
	function validateModifyUserForm() {
		jQuery("#userEmailModify").css("background-color", "white");
		jQuery("#userPasswordModify").css("background-color", "white");
		jQuery("#userNameModify").css("background-color", "white");
		jQuery("#surnameModify").css("background-color", "white");
		jQuery("#expireOnDateModify").css("background-color", "white");
		var userEmail = jQuery("#userEmailModify").val();
		var userPassword = jQuery("#userPasswordModify").val();
		var userName = jQuery("#userNameModify").val();
		var surname = jQuery("#surnameModify").val();
		var expireOnDate = jQuery("#expireOnDateModify").val();
		var validateEmailResult = validateEmail(userEmail);
		if (validateEmailResult == false) {
			jQuery("#editUserValidationMessage").html("Email id is not valid");
			jQuery("#userEmailModify").css("background-color", "red");
			return false;
		}
		var validateUserPasswordResult = validateFieldOnLength(userPassword, 5);
		if (validateUserPasswordResult == false) {
			jQuery("#editUserValidationMessage").html("Password should be atleast 5 characters long");
			jQuery("#userPasswordModify").css("background-color", "red");
			return false;
		}
		var validateUserNameResult = validateFieldOnLength(userName, 1);
		if (validateUserNameResult == false) {
			jQuery("#editUserValidationMessage").html("User name cannot be empty");
			jQuery("#userNameModify").css("background-color", "red");
			return false;
		}
		var validateSurnameResult = validateFieldOnLength(surname, 1);
		if (validateSurnameResult == false) {
			jQuery("#editUserValidationMessage").html("Surname cannot be empty");
			jQuery("#surnameModify").css("background-color", "red");
			return false;
		}
		var validateDateResult = validateFieldOnLength(expireOnDate, 1);
		if (validateDateResult == false) {
			jQuery("#editUserValidationMessage").html("Expire Date cannot be empty");
			jQuery("#expireOnDateModify").css("background-color", "red");
			return false;
		}
		return true;
	}
	function validateNewUserForm() {
		// this function validates the form submitted to add a new user
		// this function returns true if validation is successful else this funtion
		// returns false
		// the fields are - userEmail, userPassword, userName, surname, expireOnDate
		jQuery("#userEmail").css("background-color", "white");
		jQuery("#userPassword").css("background-color", "white");
		jQuery("#userName").css("background-color", "white");
		jQuery("#surname").css("background-color", "white");
		jQuery("#expireOnDate").css("background-color", "white");
		var userEmail = jQuery("#userEmail").val(); //the user email entered
		var userPassword = jQuery("#userPassword").val(); //the user password entered
		var userName = jQuery("#userName").val(); //the user name entered
		var surname = jQuery("#surname").val(); //the surname entered
		var expireOnDate = jQuery("#expireOnDate").val(); //the expire on date entered
		var userExtId = jQuery("#userExtId").val(); // the user ext id entered 

		var validateEmailResult = validateEmail(userEmail);
		if (validateEmailResult == false) {
			jQuery("#newUserValidationMessage").html("Email id is not valid");
			jQuery("#userEmail").css("background-color", "red");
			return false;
		}
		var validatePasswordResult = validateFieldOnLength(userPassword, 5);
		if (validatePasswordResult == false) {
			jQuery("#newUserValidationMessage").html("Password must be atleast 5 characters");
			jQuery("#userPassword").css("background-color", "red");
			return false;
		}
		var validateUserNameResult = validateFieldOnLength(userName, 1);
		if (validateUserNameResult == false) {
			jQuery("#newUserValidationMessage").html("User name cannot be empty");
			jQuery("#userName").css("background-color", "red");
			return false;
		}
		var validateSurnameResult = validateFieldOnLength(surname, 1);
		if (validateSurnameResult == false) {
			jQuery("#newUserValidationMessage").html("Surname cannot be empty");
			jQuery("#surname").css("background-color", "red");
			return false;
		}
		var validateDateResult = validateFieldOnLength(expireOnDate, 1);
		if (validateDateResult == false) {
			jQuery("#newUserValidationMessage").html("Expiry date cannot be empty");
			jQuery("#expireOnDate").css("background-color", "red");
			return false;
		}
		var validateUserExtIdResult = validateFieldOnLength(userExtId, 1);
		if (validateUserExtIdResult == false) {
			jQuery("#newUserValidationMessage").html("User ext id cannot be empty");
			jQuery("#userExtId").css("background-color", "red");
		}
		return true;
	}
	
	
	function validateFieldOnLength(userPassword, len) {
		if (userPassword.length < len) {
			return false;
		} else {
			return true;
		}
	}
	
	function validateEmail(userEmail) {
		var at = "@";
		var dot = ".";
		var lat = userEmail.indexOf(at);
		var lstr = userEmail.length;
		var ldot = userEmail.indexOf(dot);
		if (userEmail.indexOf(at) == -1) {
			return false;
		}
		if (userEmail.indexOf(at) == -1 || userEmail.indexOf(at) == 0
				|| userEmail.indexOf(at) == lstr) {
			return false;
		}
		if (userEmail.indexOf(dot) == -1 || userEmail.indexOf(dot) == 0
				|| userEmail.indexOf(dot) == lstr) {
			return false;
		}
		if (userEmail.indexOf(at, (lat + 1)) != -1) {
			return false;
		}
		if (userEmail.substring(lat - 1, lat) == dot
				|| userEmail.substring(lat + 1, lat + 2) == dot) {
			return false;
		}
		if (userEmail.indexOf(dot, (lat + 2)) == -1) {
			return false;
		}
		if (userEmail.indexOf(" ") != -1) {
			return false;
		}
		return true;
	}
</script>
<script type="text/javascript" src="javascript/userAddFormValidation.js"></script>
<style>
.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}
</style>
</head>
<body>
<br />
<form action="userList.action">User: <input type="text"
	name="user" id="user" size="30"></input> Status : <select name="active"
	id="active">
	<option value="active">Active</option>
	<option value="inactive">Inactive</option>
	<option value="both">Both</option>
</select> <input type="submit" value="Update"></input></form>
<button id="addNewUser" name="addNewUser"
	onclick="showAddNewUserDialog()">Add New User</button>
<br />
<%
			//get the user List map
			Logger logger = Logger.getLogger("userList.jsp");
			Map<String, Object> userListMap = (Map<String, Object>)request.getAttribute("userListMap");
			if (userListMap == null) {
				logger.error("userListMap was found to be null");
		%>
<h1>An error has occurred. Please report this to the website
administrator</h1>
<%
			} else {
		%>
<br />
<br />
<center>
<table name="userListTable" id="userListTable" class="mt_table">
	<tr>
		<th></th>
		<th>Users</th>
		<th>Name</th>
		<th>Surname</th>
		<th>Status</th>
		<th></th>
	</tr>
	<%
					Iterator<String> rolesItr = userListMap.keySet().iterator();
					int index = 1;
					String tdClass = "odd_td";
					boolean indexValueChanged = false;
					while(rolesItr.hasNext()) {
						indexValueChanged = false;
						String currentRole = rolesItr.next();
						if ((index % 2) == 0) {
							tdClass = "even_td";
						} else {
							tdClass = "odd_td";
						}
		%>
	<tr class="<%=tdClass%>">
		<td><img src="images/rolesIcon.gif" alt="Role"></td>
		<td colspan="5"><%=currentRole %></td>
	</tr>
	<%
						logger.info("Getting the users for the role: " + currentRole);
						Map<String, Object> currentRoleUserMap = (Map<String, Object>)userListMap.get(currentRole);
						Iterator<String> currentRoleUserMapItr = currentRoleUserMap.keySet().iterator();
						while (currentRoleUserMapItr.hasNext()) {
							indexValueChanged = true;
							index++;
							String userEmail = currentRoleUserMapItr.next();
							logger.info("User email: " + userEmail);
							Map<String, Object> currentUserMap = (Map<String,Object>)currentRoleUserMap.get(userEmail);
							String userName = (String)currentUserMap.get("name");
							String surname = (String)currentUserMap.get("surname");
							boolean status = (Boolean)currentUserMap.get("status");
							String userExtId = (String)currentUserMap.get("userExtId");
							String langCode = (String)currentUserMap.get("langCode");
							String password = (String)currentUserMap.get("password");
							String role = (String)currentUserMap.get("role");
							String expiryDate = currentUserMap.get("expiryDate").toString();
							String userId = currentUserMap.get("userId").toString();
							//String status = ((Boolean)currentUserMap.get("status")).toString();
							if ((index % 2) == 0) {
								tdClass = "even_td";
							} else {
								tdClass = "odd_td";
							}
		%>
	<tr class="<%=tdClass%>">
		<td></td>
		<td><%=userEmail%></td>
		<td><%=userName%></td>
		<td><%=surname%></td>
		<td>
		<%
									if (status) {
										//this is true - use the avtive icon
								%> <img src="images/active-icon.png"></img> <%
									} else {
										//this is false - use the inactive icon
								%> <img src="images/inactive-icon.png"></img> <%
									}
								%>
		</td>
		<td>
			<button onclick="modifyUserDialogOpen('<%=userEmail%>', '<%=userName%>', '<%=surname%>', '<%=userExtId%>', '<%=langCode%>', '<%=password%>', '<%=role%>', '<%=expiryDate%>', <%=userId%>)">Edit</button>
		</td>
	</tr>
	<%
						}
						index++;
					}
		%>
</table>
</center>
<%
			}
		%>

<!-- The form for adding a new user -->
<div id="newuserForm" name="newuserForm" title="Create New User"
	style="display: none;">
<p class="validateTips" id="newUserValidationMessage">All fields are
required</p>
<form name="addNewUserForm" id="addNewUserForm"
	action="addNewUser.action" onsubmit="return validateNewUserForm()"
	method="POST">
<table name="addNewUserTable" id="addNewUserTable" class="mt_table">
	<tr class="odd_td">
		<td>User Id:</td>
		<td><b>new</b></td>
		<td></td>
		<td></td>
		<td></td>
	<tr class="even_td">
		<td>External Id:</td>
		<td><input type="text" size="30" name="userExtId" id="userExtId"></input></td>
		<td></td>
		<td>Language:</td>
		<td><select name="langCode" id="langCode">
			<!-- UI Translations -->
			<%
								UITranslationsDatabaseOperations uiTranslationsDatabaseOperations = new UITranslationsDatabaseOperations();
								List<UITranslations> uiObjList = uiTranslationsDatabaseOperations.getAllUITranslationEntities();
								for (int uiObjListIndex = 0; uiObjListIndex < uiObjList.size(); uiObjListIndex++) {
									UITranslations currentUIObj = uiObjList.get(uiObjListIndex);
								%>
			<option value="<%=currentUIObj.getLangCode()%>"><%=currentUIObj.getLangCode()%></option>
			<%
								}
								%>
		</select>
	</tr>
	<tr class="odd_td">
		<td>Email:</td>
		<td><input type="text" size="30" name="userEmail" id="userEmail"></input></td>
		<td></td>
		<td>Password:</td>
		<td><input type="password" size="30" name="userPassword"
			id="userPassword"></input></td>
	</tr>
	<tr class="even_td">
		<td>Name:</td>
		<td><input type="text" size="30" name="userName" id="userName"></input></td>
		<td></td>
		<td>Surname:</td>
		<td><input type="text" size="30" name="surname" id="surname"></input</td>
	</tr>
	<tr class="odd_td">
		<td>Role:</td>
		<td><select name="userRole" id="userRole">
			<!-- Here get the roles from the database -->
			<%
								RoleDatabaseOperations roleDatabaseOperations = new RoleDatabaseOperations();
								List<Role> allRoles = roleDatabaseOperations.getAllRoleEntities();
								for (int allRolesIndex = 0; allRolesIndex < allRoles.size(); allRolesIndex++) {
									String currentRoleName = allRoles.get(allRolesIndex).getRoleExtId();
							%>
			<option value="<%=currentRoleName%>"><%=currentRoleName %></option>
			<%
								}
							%>
		</select></td>
		<td></td>
		<td>Expires on:</td>
		<td><input type="text" size="30" name="expireOnDate"
			id="expireOnDate" onclick="showCalendar()"></input> <image
			src="images/calendar.gif"></image></td>
	</tr>
	<tr class="even_td">
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td><input type="submit" value="Save" align="right"></input></td>
	</tr>
</table>
</form>
</div>

<!-- This form is for changing an already added user -->
<div id="editUserForm" name="editUserForm" title="Modify a User"
	style="display: none;">
<p class="validateTips" id="editUserValidationMessage">All fields
are required</p>
<form name="modifyUserForm" id="modifyUserForm"
	action="modifyUser.action" onsubmit="return validateModifyUserForm()"
	method="POST">
<table name="modifyUserTable" id="modifyUserTable" class="mt_table">
	<tr class="odd_td">
		<td>User Id:</td>
		<td><b><div id = "userIdModify"></div></b></td>
		<td></td>
		<td></td>
		<td></td>
	<tr class="even_td">
		<td>External Id:</td>
		<td><input type="text" size="30" name="userExtIdModify"
			id="userExtIdModify" readonly="readonly"></input></td>
		<td></td>
		<td>Language:</td>
		<td><select name="langCodeModify" id="langCodeModify">
			<!-- UI Translations -->
			<%
								uiTranslationsDatabaseOperations = new UITranslationsDatabaseOperations();
								uiObjList = uiTranslationsDatabaseOperations.getAllUITranslationEntities();
								for (int uiObjListIndex = 0; uiObjListIndex < uiObjList.size(); uiObjListIndex++) {
									UITranslations currentUIObj = uiObjList.get(uiObjListIndex);
								%>
			<option value="<%=currentUIObj.getLangCode()%>"><%=currentUIObj.getLangCode()%></option>
			<%
								}
								%>
		</select>
	</tr>
	<tr class="odd_td">
		<td>Email:</td>
		<td><input type="text" size="30" name="userEmailModify"
			id="userEmailModify"></input></td>
		<td></td>
		<td>Password:</td>
		<td><input type="password" size="30" name="userPasswordModify"
			id="userPasswordModify"></input></td>
	</tr>
	<tr class="even_td">
		<td>Name:</td>
		<td><input type="text" size="30" name="userNameModify"
			id="userNameModify"></input></td>
		<td></td>
		<td>Surname:</td>
		<td><input type="text" size="30" name="surnameModify"
			id="surnameModify"></input</td>
	</tr>
	<tr class="odd_td">
		<td>Role:</td>
		<td><select name="userRoleModify" id="userRoleModify">
			<!-- Here get the roles from the database -->
			<%
								roleDatabaseOperations = new RoleDatabaseOperations();
								allRoles = roleDatabaseOperations.getAllRoleEntities();
								for (int allRolesIndex = 0; allRolesIndex < allRoles.size(); allRolesIndex++) {
									String currentRoleName = allRoles.get(allRolesIndex).getRoleExtId();
							%>
			<option value="<%=currentRoleName%>"><%=currentRoleName %></option>
			<%
								}
							%>
		</select></td>
		<td></td>
		<td>Expires on:</td>
		<td><input type="text" size="30" name="expireOnDateModify"
			id="expireOnDateModify" onclick="showModifyCalendar()"></input> <image
			src="images/calendar.gif"></image></td>
	</tr>
	<tr class="even_td">
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td><input type="submit" value="Save" align="right"></input></td>
	</tr>
</table>
</form>
</div>
</body>
</html>